<template>
  <div>
    <el-main>
      <el-row :gutter="34" class="box">
        <el-col :span="13" class="top_title">
          <el-card shadow="always" style="margin-bottom: 34px;">
            <el-row class="box_top">
              <el-col class="box_bottom" :style="{ '--zoom': zoom }">
                <el-row>
                  <el-col class="Statistics">
                    <div v-if="chart.length > 0">
                      <el-row>
                        <el-col :span="8">
                          <el-col class="always_title_box" v-if="chart.length > 0">
                            <el-row>
                              <el-col :span="19" class="title">
                                {{ dataInfo.list.str4 }}
                              </el-col>
                            </el-row>
                          </el-col>
                          {{ dataInfo.list.str1 }}
                        </el-col>
                        <el-col :span="16">
                          <div id="bar" style="height:250px;width: 100% ;"></div>
                        </el-col>
                      </el-row>
                    </div>
                    <!-- <div v-else>
                      {{ dataInfo.list.str1 }}
                    </div> -->
                  </el-col>
                  <el-col class="table_t" :style="{ 'marginTop': chart.length > 0 ? '41px' : '' }"
                    v-if="dataInfo.visit_this">顺德各镇街{{ dataInfo.visit[4] }}月份新增专利授权情况一览表</el-col>
                  <el-col class="table_box table_box_top">
                    <el-table v-if="dataInfo.result" :header-cell-style="{ backgroundColor: '#E8ECEF' }"
                      :data="tableData3" style="width: 100%">
                      <el-table-column prop="town" :label="dataInfo.result.name.town">
                      </el-table-column>
                      <el-table-column prop="name1" :label="dataInfo.result.name.name1" width="77">
                      </el-table-column>
                      <el-table-column prop="name2" :label="dataInfo.result.name.name2" width="77">
                      </el-table-column>
                      <el-table-column prop="name3" :label="dataInfo.result.name.name3" width="77">
                      </el-table-column>
                      <el-table-column prop="name4" :label="dataInfo.result.name.name4" width="77">
                      </el-table-column>
                      <el-table-column prop="name5" :label="dataInfo.result.name.name5" width="77">
                      </el-table-column>
                      <el-table-column prop="name6" :label="dataInfo.result.name.name6" width="77">
                      </el-table-column>
                      <el-table-column prop="name7" :label="dataInfo.result.name.name7" width="77">
                      </el-table-column>
                      <el-table-column prop="name8" :label="dataInfo.result.name.name8" width="77">
                      </el-table-column>
                      <el-table-column prop="name9" :label="dataInfo.result.name.name9" width="77">
                      </el-table-column>
                      <el-table-column prop="name10" :label="dataInfo.result.name.name10" width="77">
                      </el-table-column>
                      <el-table-column prop="name11" :label="dataInfo.result.name.name11" width="77">
                      </el-table-column>
                    </el-table>
                  </el-col>
                  <el-col style="margin: 20px 0;" v-if="tableData4.length > 0">
                    <el-row :gutter="14">
                      <el-col :span="11" class="change">
                        {{ dataInfo.list.str2 }}
                      </el-col>
                      <el-col :span="13" class="change_table">
                        <el-table :header-cell-style="{ backgroundColor: '#E8ECEF' }" :data="tableData4"
                          style="width: 100%">
                          <el-table-column prop="town" label="">
                          </el-table-column>
                          <el-table-column prop="name1" label="本月">
                          </el-table-column>
                          <el-table-column prop="name2" label="上月">
                          </el-table-column>
                          <el-table-column prop="name3" label="去年同期">
                          </el-table-column>
                          <el-table-column prop="name4" label="同比">
                          </el-table-column>
                          <el-table-column prop="name5" label="环比">
                          </el-table-column>
                        </el-table>
                      </el-col>
                    </el-row>
                  </el-col>
                  <!-- <el-col class="solve">
                    本月走访企业21家,收集企业需求<span class="blue f_w_b">26</span>件,解决问题<span
                      class="blue f_w_b">19</span>件,需求解决率<span class="blue f_w_b">112%</span>。<br />
                    企业需求前三类型:国际申请(<span class="blue f_w_b">36个,42%</span>)，专利保险(<span
                      class="blue f_w_b">26个,28%</span>)、 贯标及管理制度建设(<span class="blue f_w_b">12个,16%</span>)。
                  </el-col> -->
                  <!-- <el-col class="solve_tu">
                    <el-row :gutter="21">
                      <el-col :span="6" v-for="item in 4" :key="item">
                        <el-row>
                          <el-col :span="12">
                            上月走访企业
                            <span class="f_s_30 f_c_b">215</span> <span class="f_c_b">家</span>
                          </el-col>
                          <el-col :span="12">
                            <el-image style="width: 59px; height: 59px"
                              src='https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' fit="cover">
                            </el-image>
                          </el-col>
                        </el-row>
                      </el-col>
                    </el-row>
                  </el-col> -->
                </el-row>
              </el-col>
            </el-row>
          </el-card>

          <el-card shadow="always" v-if="!dataInfo.list.str2">
            <el-row class="box_top">
              <el-col class="always_title_box" :style="{ '--zoom': zoom }">
                <el-row>
                  <el-col :span="19" class="title" style="text-align: center;">顺德各镇街累计专利授权情况一览表</el-col>
                </el-row>
              </el-col>
              <el-col class="box_bottom" :style="{ '--zoom': zoom }">
                <el-row>
                  <el-col class="table_box">
                    <el-table v-if="tableData3_2[0]" :header-cell-style="{ backgroundColor: '#E8ECEF' }"
                      :data="tableData3_2" style="width: 100%">
                      <el-table-column prop="town" :label="dataInfo.arr_news.name.town">
                      </el-table-column>
                      <el-table-column prop="0" :label="dataInfo.arr_news.name[0]" width="77">
                      </el-table-column>
                      <el-table-column prop="1" :label="dataInfo.arr_news.name[1]" width="77">
                      </el-table-column>
                      <el-table-column prop="2" :label="dataInfo.arr_news.name[2]" width="77">
                      </el-table-column>
                      <el-table-column prop="3" :label="dataInfo.arr_news.name[3]" width="77">
                      </el-table-column>
                      <el-table-column prop="4" :label="dataInfo.arr_news.name[4]" width="77">
                      </el-table-column>
                      <el-table-column prop="5" :label="dataInfo.arr_news.name[5]" width="77">
                      </el-table-column>
                      <el-table-column prop="6" :label="dataInfo.arr_news.name[6]" width="77">
                      </el-table-column>
                      <el-table-column prop="7" :label="dataInfo.arr_news.name[7]" width="77">
                      </el-table-column>
                      <el-table-column prop="8" :label="dataInfo.arr_news.name[8]" width="77">
                      </el-table-column>
                      <el-table-column prop="9" :label="dataInfo.arr_news.name[9]" width="77">
                      </el-table-column>
                      <el-table-column prop="10" :label="dataInfo.arr_news.name[10]" width="77">
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-card>
        </el-col>

        <el-col :span="11" class="ranking" :style="{ '--zoom': zoom }">
          <el-row :gutter="20">
            <el-col class="ranking_r">
              <el-card shadow="always">
                <el-row class="ranking_box">
                  <!-- 1.0版本 -->
                  <!-- 上 -->
                  <!-- <el-col>
                    <el-table class="home_table1" :header-cell-style="{ backgroundColor: '#f5f6f9' }" :data="tableData1"
                      style="width: 100%">
                      <el-table-column prop="totalNumber" label="专利有效总量" width="200">
                        <template slot-scope="scope">
                          <div class="blue_big">
                            {{ scope.row.totalNumber }}
                          </div>
                          <div class="text_list m_text_t">总量</div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="max" label="发明专利量" width="200">
                        <template slot-scope="scope">
                          <div class="blue_big">
                            {{ scope.row.max[0] }}
                          </div>
                          <div class="text_list m_text_t">
                            {{ scope.row.max[1] }}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="totalTop" label="" width="200">
                        <template slot-scope="scope">
                          <div style="padding: 8px 0;"
                            :class="index == 2 ? 'item_list item_list_l p_text_tb' : 'p_text_tb item_list'"
                            v-for="(item, index) in scope.row.totalTop" :key="item">
                            <div class="blue_big text_list_s t_l_m">TOP{{ index + 1 }}</div>
                            <div class="text_list t_l_m ">{{ item }}</div>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="nowTop" label="我们的排名">
                        <template slot-scope="scope">
                          <div class="blue_big text_list_s">
                            {{ scope.row.nowTop }}
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col> -->
                  <!-- 中 -->
                  <!-- <el-col class="box_zho">
                    <el-row type="flex" :gutter="20">
                      <el-col v-for="(item, index) in topcolor" :key="index" class="z_list">
                        <el-row class="z_l_text">
                          <el-col>51,190</el-col>
                          <el-col>
                            <el-row class="lb_b">
                              <!~~ <el-col :style="{ backgroundColor: item.color }" :span="1" :offset="5"></el-col> ~~>
                              <el-col :style="{ '--bgColor': item.color }">{{ item.text }}</el-col>
                            </el-row>
                          </el-col>
                          <el-col>全区排名：TOP1</el-col>
                        </el-row>
                      </el-col>
                    </el-row>
                  </el-col> -->
                  <!-- 下 -->
                  <!-- <el-col class="box_xia">
                    <el-table :header-cell-style="{ backgroundColor: '#f5f6f9' }" :data="tableData2"
                      style="width: 100%">
                      <el-table-column prop="total" label="授权量">
                        <template slot-scope="scope">
                          <div class="blue_big">
                            {{ scope.row.total[0] }}
                          </div>
                          <div class="text_list m_text_t">
                            {{ scope.row.total[1] }}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="contrast" label="占比">
                          </el-table-column>
                      <el-table-column prop="compare_year" label="与去年同期相比">
                        <template slot-scope="scope">
                          <div class="">
                            同比增加
                          </div>
                          <div class="green_l">
                            <span>
                              {{ scope.row.compare_year[0] }}
                            </span>
                            <i class="el-icon-top " style="font-weight: bolder;">
                            </i>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="compare_month" label="与上月同期相比">
                        <template slot-scope="scope">
                          <div class="">
                            同比减少
                          </div>
                          <div class="red_l">
                            <span>
                              {{ scope.row.compare_month[0] }}
                            </span>
                            <i class="el-icon-bottom" style="font-weight: bolder;">
                            </i>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col> -->

                  <!-- 2.0版本 -->
                  <!-- <el-col class="title">
                    走访数据：
                  </el-col>
                  <el-col class="solve">
                    {{ dataInfo.list.str3 }}
                  </el-col>

                  <el-col class="solve_tu" style="margin-top: 30px;" v-if="dataInfo.visit">
                    <el-row :gutter="21">
                      <el-col :span="6">
                        <div @click="goTypeList(3, 1)" style="cursor: pointer;">
                          <el-row>
                            <el-col :span="15">
                              <div>{{ dataInfo.visit[4] }}月走访企业</div>
                              <span class="f_s_30 f_c_b">{{ dataInfo.visit[0] }}</span> <span class="f_c_b">家</span>
                            </el-col>
                            <el-col :span="9">
                              <svg-icon icon-class="yue" style="width: 59px; height: 59px" />
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div @click="goTypeList(2, 1)" style="cursor: pointer;">
                          <el-row>
                            <el-col :span="15">
                              <div>{{ dataInfo.visit[4] }}月企业需求</div>
                              <span class="f_s_30 f_c_b">{{ dataInfo.visit[1] }}</span> <span class="f_c_b">家</span>
                            </el-col>
                            <el-col :span="9">
                              <svg-icon icon-class="yue" style="width: 59px; height: 59px" />
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div @click="goTypeList(5, 1)" style="cursor: pointer;">
                          <el-row>
                            <el-col :span="15">
                              <div>{{ dataInfo.visit[4] }}月已解决</div>
                              <span class="f_s_30 f_c_b">{{ dataInfo.visit[2] }}</span> <span class="f_c_b">家</span>
                            </el-col>
                            <el-col :span="9">
                              <svg-icon icon-class="yue" style="width: 59px; height: 59px" />
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <el-row>
                          <el-col :span="15">
                            <div>{{ dataInfo.visit[4] }}月需求解决率</div>
                            <span class="f_s_30 f_c_b">{{ dataInfo.visit[3] }}</span> <span class="f_c_b">%</span>
                          </el-col>
                          <el-col :span="9">
                            <svg-icon icon-class="tongji" style="width: 59px; height: 59px" />
                          </el-col>
                        </el-row>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col class="solve_tu" style="margin-top: 30px;" v-if="dataInfo.visit_this">
                    <el-row :gutter="21">
                      <el-col :span="6">
                        <div @click="goTypeList(3, 2)" style="cursor: pointer;">
                          <el-row>
                            <el-col :span="15">
                              <div>{{ dataInfo.visit_this[4] }}月走访企业</div>
                              <span class="f_s_30 f_c_b">{{ dataInfo.visit_this[0] }}</span> <span class="f_c_b">家</span>
                            </el-col>
                            <el-col :span="9">
                              <svg-icon icon-class="yue" style="width: 59px; height: 59px" />
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div @click="goTypeList(2, 2)" style="cursor: pointer;">
                          <el-row>
                            <el-col :span="15">
                              <div>{{ dataInfo.visit_this[4] }}月企业需求</div>
                              <span class="f_s_30 f_c_b">{{ dataInfo.visit_this[1] }}</span> <span class="f_c_b">家</span>
                            </el-col>
                            <el-col :span="9">
                              <svg-icon icon-class="yue" style="width: 59px; height: 59px" />
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div @click="goTypeList(2, 2)" style="cursor: pointer;">
                          <el-row>
                            <el-col :span="15">
                              <div>{{ dataInfo.visit_this[4] }}月已解决</div>
                              <span class="f_s_30 f_c_b">{{ dataInfo.visit_this[2] }}</span> <span class="f_c_b">家</span>
                            </el-col>
                            <el-col :span="9">
                              <svg-icon icon-class="yue" style="width: 59px; height: 59px" />
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <el-row>
                          <el-col :span="15">
                            <div>{{ dataInfo.visit_this[4] }}月需求解决率</div>
                            <span class="f_s_30 f_c_b">{{ dataInfo.visit_this[3] }}</span> <span class="f_c_b">%</span>
                          </el-col>
                          <el-col :span="9">
                            <svg-icon icon-class="tongji" style="width: 59px; height: 59px" />
                          </el-col>
                        </el-row>
                      </el-col>
                    </el-row>
                  </el-col>  -->

                  <!-- 3.0版本 -->
                  <el-col class="title" v-if="dataInfo.visit_this">
                    {{name}}企业走访情况
                  </el-col>
                  <el-col>
                    <div class="change_b" :style="{ '--zoom': zoom }">
                      <el-row :gutter="11">
                        <el-col :span="6" v-for="(item, index) in dataInfo.visit" :key="index">
                          <div v-if="index < 4" class="change_b_item" :style="{ '--bgColor': changeTypeBgc[index] }">
                            <div>
                              <div>{{ dataInfo.visit_this[4] }}月</div>
                              <div>{{ visitName[index] }}</div>
                            </div>
                            <div class="item_t"><span>{{ dataInfo.visit_this[index] }}{{ index > 2 ? '%' : '' }}</span>
                            </div>
                            <div>{{ dataInfo.visit[4] }}月：{{ item }}{{ index > 2 ? '%' : '' }}</div>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>

            <el-col class="ranking_r">
              <el-card shadow="always">
                <el-row class="ranking_box">
                  <el-col class="title" v-if="dataInfo.visit_this">
                    {{name}}企业需求情况
                  </el-col>
                  <el-col>
                    <el-row :gutter="0">
                      <el-col :span="12">
                        <el-row :gutter="20">
                          <el-col :span="12" :style="{ '--bgc': item.bgc }" v-for="(item, index) in demandList"
                            :key="index" class="demand_box">
                            <div class="left_demand">
                              <div class="left_demand_new">
                                <div class="demand_title"><span style="color: initial;">{{ item.value }}</span></div>
                                <div><span style="font-size: 30px;margin-right:5px;font-weight: bold;">
                                    <CountTo :startVal='0' :endVal='Number(item.Number)' :duration='2100' />
                                  </span>{{
                                    item.Company
                                  }}
                                </div>
                              </div>
                            </div>
                          </el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="12" style="height: 100%;">
                        <div class="pie_new">
                          <div id="pie" class="pie"></div>
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>

            <el-col class="ranking_r">
              <el-card shadow="always">
                <el-row class="ranking_box">
                  <el-col class="title">
                    {{name}}知识产权统计
                  </el-col>
                  <el-col class="solve">
                    <el-row :gutter="11">
                      <el-col :span="8" v-for="(item, index) in changeType" :key="index">
                        <div class="change_b_item">
                          <div class="item_t"><span>本月{{
                            item.month_add >= 0 ? '+' + item.month_add : item.month_add
                          }}</span></div>
                          <div class="item_z">
                            <div class="z_t">{{ item.number }}</div>
                            <div class="z_b" :style="{ '--bgColor': changeBgc[index] }">{{ item.name }}</div>
                          </div>
                          <div class="item_b">
                            <el-row :gutter="20" style="margin-left: 0px;margin-right: 0px;">
                              <el-col :span="12">
                                <div>
                                  {{ item.prp_name }}<br />
                                  <span :class="item.prp_status == 0 ? 'span_typebot' : 'span_typeTop'">{{
                                    item.prp_add
                                  }}<i :class="item.prp_status == 0 ? 'el-icon-bottom' : 'el-icon-top'"></i></span>
                                </div>
                              </el-col>
                              <el-col :span="12">
                                <div>
                                  {{ item.ratio_name }}<br />
                                  <span :class="item.ratio_status == 0 ? 'span_typebot' : 'span_typeTop'">{{
                                    item.ratio_add
                                  }}<i :class="item.ratio_status == 0 ? 'el-icon-bottom' : 'el-icon-top'"></i></span>
                                </div>
                              </el-col>
                            </el-row>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>
<script>
import { getSixList, indexInfo, streetcenter, center, visitcenter, visitcentertype } from '@/api/newuser.js'
import * as echarts from 'echarts'
import CountTo from 'vue-count-to'

export default {
  components: { CountTo },
  data() {
    return {
      name: '',
      changeTypeBgc: ['#006CFF', '#7F6FEC', '#FF8A6E', '#2BCFB6'],
      piecolor: ['#0496ff', '#09e3ff', '#0745eb', '#0494fd', '#fe836c', '#786ce0'],
      zoom: 1,
      street_id: '',
      changeBgc: {
        'open': '#006CFF',
        'auth': '#6ACCA3',
        'news': '#EACF19',
        'appear': '#7F6FEC',
        'apply': '#FF8A6E',
        'trademark': '#2BCFB6',
      },
      changeType: [
      ],
      changeList: {},
      demandList: [
        {
          value: '国际申请',
          bgc: '#0297FE',
          Company: '个',
          Number: '436',
        },
        {
          value: '年度企业需求',
          bgc: '#02ECFF',
          Company: '个',
          Number: '49',
        },
        {
          value: '政策申请',
          bgc: '#0043FF',
          Company: '个',
          Number: '48',
        },
        {
          value: '专利侵权',
          bgc: '#016AFD',
          Company: '个',
          Number: '34',
        }
      ],
      topcolor: [
        {
          color: '#006CFF',
          text: '发明公开',
        },
        {
          color: '#6ACCA3',
          text: '发明授权',
        },
        {
          color: '#EACF19',
          text: '实新授权',
        },
        {
          color: '#7F6FEC',
          text: '外观授权',
        },
        {
          color: '#FE7C4B',
          text: 'PCT申请',
        },
      ],
      tableData1: [
        {
          totalNumber: '226,167',
          max: ['110,167', '发明专利  42%'],
          totalTop: ['北滘', '容桂', '勒流'],
          nowTop: 'TOP2'
        }
      ],
      tableData3: [
      ],
      tableData3_2: [
      ],
      tableData2: [
      ],
      tableData4: [
      ],
      textType: true,
      dataInfo: {
        list: {
          str1: '',
          str2: '',
          str3: '',
        },
        visit: [],
      },
      chart: [],
      visitName: ['走访企业', '企业需求', '已解决需求', '需求解决率'],
    };
  },
  created() {
    this.visitcentertype();
  },
  mounted() {
    this.indexInfo();
    let width = document.documentElement.clientWidth || document.body.clientWidth;
    this.zoom = width / 1920;
    // visitcenter().then(res => {
    //   this.changeList = res
    // })

    this.name = this.$store.state.user.street_name
  },
  methods: {
    async visitcentertype() {
      let data = await visitcentertype({ id: this.$store.state.user.id })
      data = data.list.map((item, index) => {
        let demo = {}
        demo.itemStyle = {
          color: this.piecolor[index]
        }
        demo.value = item.number
        demo.name = item.name
        if (index < this.demandList.length) {
          this.demandList[index].value = item.name
          this.demandList[index].Number = item.number
        }
        return demo
      })
      //饼图
      let pie = document.getElementById('pie');
      this.pie(pie, data);
    },
    pie(chartDom, data) {
      let myChart = echarts.init(chartDom, 'dark');
      let option = {
        backgroundColor: '', //设置无背景色
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: (params) => {
            var html = params.color + params.data.name + params.data.value + params.percent.toFixed(0) + '%';

            let res = ` 
                  <div style='display: inline-block;width:10px;height:10px;background-color:${params.color};border-radius: 50%;'></div>
                  <span style='margin:0 5px 0 0;font-weight: bold;font-size: 14px;'>${params.data.name}</span>
                  <span style='margin:0 5px'>${params.data.value}个</span>
                  <span style='margin:0 0 0 5px'>${params.percent.toFixed(0)}%</span>
              `
            return res;
          }
        },
        legend: {
          orient: 'vertical',
          right: '-2%',
          top: '30%',
          // bottom: 20,
          type: 'scroll'
        },
        series: [
          {
            center: ['32%', '50%'],
            name: '',
            type: 'pie',
            radius: ['55%', '90%'],
            avoidLabelOverlap: false,
            itemStyle: {
              // borderRadius: 5, //圆角
              // borderColor: '#111129',
              // borderWidth: 5 //间隙
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };
      option && myChart.setOption(option);
      window.onresize = myChart.resize;
    },
    indexInfo() {
      indexInfo({
        id: this.$store.state.user.id,
      }).then(res => {
        this.dataInfo = res;
        let Data3 = [];
        this.chart = res.chart
        this.$nextTick(res => {
          this.barEchart()
        })
        for (let key in res.result) {
          if (key == 'num7' || key == 'num2' || key == 'num4' || key == 'num6' || key == 'rat') {
            Data3.push(res.result[key])
          }
        }
        let Data3rank = {
          'name1': res.result.rank[0],
          'name2': res.result.rank[1],
          'name3': res.result.rank[2],
          'name4': res.result.rank[3],
          'name5': res.result.rank[4],
          'name6': res.result.rank[5],
          'name7': res.result.rank[6],
          'name8': res.result.rank[7],
          'name9': res.result.rank[8],
          'name10': res.result.rank[9],
          'name11': res.result.rank[10],
          'town': "排名"
        }
        //在Data3后面添加

        Data3.push(Data3rank)
        this.tableData3 = Data3

        // console.log(Data3, 'Data3');

        // console.log(res, 'res.arr_news');
        for (let key in res.arr_news) {
          if (key != 'name') {
            this.tableData3_2.push(res.arr_news[key])
          }
        }

        // console.log(this.tableData3_2, 'res.arr_news');

        let Data4 = []
        for (let key in res.myself) {
          if (key == 'num1' || key == 'num2' || key == 'num4' || key == 'num3') {
            Data4.push(res.myself[key])
          }
        }
        this.tableData4 = Data4

        this.street_id = res.street_id

        getSixList({
          street_id: this.street_id == 999 ? '' : this.street_id,
        }).then(res => {
          this.changeType = res.list
        })

        // if (this.street_id == 999) {
        //   center({ type: 2 }).then(res => {
        //     this.changeType = res.list
        //   })
        // } else {
        //   streetcenter({
        //     id: this.street_id,
        //     type: 2
        //   }).then(res => {
        //     this.changeType = res.list
        //   })
        // }
      })
    },
    goTypeList(type, timeRange) {
      this.$router.push({
        path: '/workWaitvisit',
        query: {
          type: type,
          timeRange: timeRange,
        },
      });
    },
    barEchart() {
      var chartDom = document.getElementById('bar');
      if (!chartDom) return;
      var myChart = echarts.init(chartDom);
      var option = {
        legend: {
          top: 'bottom',
          data: ['专利授权量', '上月授权量'],
        },
        tooltip: {
          trigger: 'axis'
        },
        dataset: {
          source: this.chart
        },
        grid: { // 让图表占满容器
          top: "40px",
          left: "60px",
          right: "60px",
          bottom: "40px"
        },
        xAxis: {
          type: 'category',
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '专利授权量',
            // min: 0,
            // max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '上月授权量',
            // min: -250,
            // max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + '件';
              }
            }
          },
          {
            type: 'bar',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + '件';
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }
  },
};
</script>

<style scoped lang="less">
.el-main {
  margin-right: 15px;
  background-color: #f4f5f7;
  border-radius: 5px;
  margin-top: 15px;
}

.blue {
  color: #377CFB;
}

.f_w_b {
  font-weight: bold;
}

.red {
  color: #FF0000;
}

.box {
  .top_title {
    .box_top {
      .always_title_box {
        zoom: var(--zoom);
        height: 37px;
        line-height: 37px;
        margin-bottom: 15px;
      }

      .box_bottom {
        zoom: var(--zoom);

        .Statistics {
          font-size: 17px;
          // color: #334681;
          line-height: 27px;
        }

        .table_t {
          // font-size: 18px;
          // color: #334681;

          margin-bottom: 20px;
          font-weight: bolder;
          font-size: 24px;
          width: 100%;
          text-align: center;
        }

        ::v-deep .table_box_top {
          .el-table__header-wrapper {
            table {
              .has-gutter {

                //倒数第2个子元素
                tr th:nth-last-child(2) {
                  color: #293868;
                  font-weight: bold;
                }
              }
            }
          }

          .el-table__body-wrapper {
            table {
              tbody {
                tr td:nth-last-child(1) {
                  color: #293868;
                  font-weight: bold;
                }

                tr:last-child td {
                  color: #293868;
                  font-weight: bold;
                }
              }
            }
          }
        }

        ::v-deep .table_box {
          margin-bottom: 10px;

          .el-table__header-wrapper {
            table {
              .has-gutter {
                tr th {
                  font-weight: initial;
                  font-size: 14px;
                  color: #334681;
                  height: 44px;
                  text-align: center;
                  padding: 0;
                }

                //第一个元素
                tr th:first-child {
                  text-align: left;
                }

                //倒数第2个子元素
                // tr th:nth-last-child(2) {
                //   color: #293868;
                //   font-weight: bold;
                // }
              }
            }
          }

          .el-table__body-wrapper {
            table {
              tbody {
                tr td {
                  font-size: 14px;
                  color: #334681;
                  text-align: center;
                  height: 61px;
                }

                tr td:first-child {
                  text-align: left;
                }

                tr:last-child td {
                  color: #293868;
                  font-weight: bold;
                }

                tr td:nth-last-child(1) {
                  color: #293868;
                  font-weight: bold;
                }
              }
            }
          }
        }

        .change {
          font-size: 17px;
          color: #334681;
          line-height: 27px;
        }

        ::v-deep .change_table {
          font-size: 18px;

          .el-table__header-wrapper {
            table {
              .has-gutter {
                tr th {
                  font-weight: initial;
                  font-size: 14px;
                  color: #334681;
                  // height: ;
                  text-align: right;
                  padding: 0;
                }
              }
            }
          }

          .el-table__body-wrapper {
            table {
              tbody {
                tr td {
                  font-size: 14px;
                  color: #334681;
                  text-align: right;
                }
              }
            }
          }
        }



        .solve_tu {
          line-height: 27px;
          font-size: 16px;
          color: #A1A4A6;

          .f_s_30 {
            font-weight: bold;
            font-size: 30px;
          }

          .f_c_b {
            color: #334681;
          }
        }
      }

      .title {
        font-weight: bolder;
        font-size: 24px;
        width: 100%;
        // text-align: center;
        margin-bottom: 15px;
      }

      .title_type {
        font-size: 16px;
        color: #334681;
      }

      .top_b {
        background-color: #3277ff;
        padding: 11px 48px 9px 46px;
        height: 37px;
      }
    }

  }

  .ranking {
    zoom: var(--zoom);

    .ranking_r {
      // height: 500px;
      margin-bottom: 34px;

      ::v-deep .ranking_box {
        .demand_box {
          height: 100px;
          margin: 20px 0 0 0;

          .left_demand {
            background-color: #f5f6fa;
            height: 100%;
            text-align: left;
            font-size: 16px;
            padding: 38px 0px 29px 46px;
            line-height: initial;
            position: relative;
            color: var(--bgc);
            position: relative;

            .left_demand_new {
              position: absolute;
              top: 50%;
              left: 78%;
              width: 100%;
              transform: translate(-50%, -50%);
            }

            .demand_title {
              display: inline-block;
              position: relative;
              width: 70%;
            }

            .demand_title::before {
              content: '';
              display: inline-block;
              width: 5px;
              height: 12px;
              border-radius: 3px;
              background-color: var(--bgc);
              margin-right: 5px;
              vertical-align: middle;
              position: absolute;
              top: 50%;
              left: -10px;
              transform: translate(0px, -50%);
            }
          }

        }

        .pie_new {

          .pie {
            // position: absolute !important;
            // width: 130%;
            // // height: 396px;
            height: 240px;
            // top: -50px;
            // left: -85px;
          }
        }

        .change_b {
          height: 35%;
          zoom: var(--zoom);

          .el-row {
            height: 100%;

            .el-col {
              height: 100%;

              .change_b_item {
                margin-top: 11px;
                font-size: 16px;
                text-align: center;
                height: 140px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                line-height: initial;

                .item_t {
                  span {
                    background-color: var(--bgColor);
                    border-radius: 5px;
                    color: #fff;
                    font-size: 16px;
                    padding: 2px 20px 2px 20px;
                    display: inline-block;
                  }
                }
              }
            }
          }
        }

        .title {
          font-weight: bolder;
          font-size: 24px;
          width: 100%;
          text-align: center;
          margin-bottom: 15px;
        }

        .solve {
          // margin-top: 30px;
          margin-bottom: 13px;
          line-height: 27px;
        }

        .change_b_item {
          margin-top: 11px;
          font-size: 11px;
          text-align: center;
          height: 158px;
          background-color: #f5f6fa;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          line-height: initial;

          .item_t {
            span {
              background-color: #e9edfa;
              border-radius: 5px;
              color: #236eff;
              font-size: 12px;
              padding: 4px 12px 3px 12px;
              display: inline-block;
            }
          }

          .item_z {
            .z_t {
              color: #32457f;
              font-size: 22px;
            }

            .z_b {
              font-size: 13px;
              color: #354581;
              position: relative;
            }

            .z_b::before {
              content: '';
              display: inline-block;
              width: 5px;
              height: 12px;
              border-radius: 3px;
              background-color: var(--bgColor);
              margin-right: 5px;
              vertical-align: middle;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-35px, -50%);
            }
          }

          .item_b {
            .el-row {
              padding: 0 5px;

              .el-col {
                div {
                  background-color: #e9edfa;
                  color: #717ca3;
                  border-radius: 5px;
                  padding: 8px 2px;
                  font-size: 12px;

                  span {

                    i {
                      font-weight: bold;
                    }

                  }

                  .span_typeTop {
                    color: #FF4439;
                  }

                  .span_typebot {
                    color: #2dcc89;
                  }
                }
              }
            }
          }
        }

        .solve_tu {
          line-height: 27px;
          font-size: 16px;
          color: #A1A4A6;

          .f_s_30 {
            font-weight: bold;
            font-size: 30px;
          }

          .f_c_b {
            color: #334681;
          }
        }


        .box_zho {
          margin-top: 20px;

          .z_list {
            margin: 0 10px;
            // padding: 20px 10px 8px 10px;
            padding-top: 20px;
            padding-bottom: 10px;
            text-align: center;
            background-color: #f4f6f8;

            .z_l_text {
              div:nth-child(1) {
                font-size: 26px;
                margin-bottom: 14px;
              }

              div:nth-child(2) {
                font-size: 12px;

                .lb_b {
                  div:nth-child(1) {
                    // width: 3px;
                    // height: 13px;
                    // border-radius: 3px;
                    // background-color: #000;
                    font-size: 16px;
                  }

                  div:nth-child(1)::before {
                    content: '';
                    display: inline-block;
                    width: 6px;
                    height: 18px;
                    border-radius: 3px;
                    background-color: var(--bgColor);
                    margin-right: 5px;
                    vertical-align: middle;
                  }
                }
              }

              div:nth-child(3) {
                font-size: 14px;
                color: #4177fc;
              }
            }
          }
        }

        .home_table1 {

          .el-table__header-wrapper {
            table {
              .has-gutter {
                tr th {
                  font-weight: initial;
                  font-size: 16px;
                  color: #334681;
                }

                tr th:nth-child(4) {
                  text-align: center;
                }
              }
            }
          }

          .el-table__body-wrapper {
            table {
              tbody {
                height: 175px;

                tr td {
                  font-size: 10px;
                  height: 154px;
                }

                tr td:nth-child(3) {}

                tr td:nth-child(4) {
                  text-align: center;
                }
              }
            }
          }

        }

        .box_xia {
          margin-top: 20px;

          .el-table__header-wrapper {
            table {
              .has-gutter {
                tr th {
                  font-size: 16px;
                  font-weight: initial;
                  color: #334681;
                  text-align: center;
                }

                //第一个元素
                tr th:first-child {
                  text-align: left;
                }
              }
            }
          }

          .el-table__body-wrapper {
            table {
              tbody {
                tr td {
                  text-align: center;
                  padding: 26px 0;
                }

                tr td:first-child {
                  text-align: left;
                }
              }
            }

            .green_l {
              color: #23B899;
            }

            .red_l {
              color: #FF4439;
            }
          }
        }

      }
    }



    .blue_big {
      color: #387DFF;
      font-weight: bolder;
      font-size: 30px;
    }

    .text_list {
      font-size: 14px;
      color: #334681;
    }

    .item_list {
      display: flex;
      justify-content: center;
      border-bottom: 1px solid #E8ECEF;
    }

    .item_list_l {
      display: flex;
      border: none;
    }

    .text_list_s {
      font-size: 18px;
      display: inline-block;
    }

    .t_l_m {
      margin: 0 8px;
    }

    .p_text_tb {
      margin: 0px 0;
    }

    .m_text_t {
      margin-top: 14px;
    }

  }
}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}
</style>
